<template>
  <myLeftRightLaout>
    <template v-slot:leftL>
      <myMenu :menuData="menuData" @emitTag="toggleNotes"></myMenu>
      <div class="searchBox">
        <myInput class="searchInput" v-model="searctText"></myInput>
        <myButton @click="search">search</myButton>
      </div>
      <myList height="87%" width="100%" :listData="obj.config" @listToggle="showContend"></myList>
    </template>
    <template v-slot:rightL>
      <div class="note_contend">
        <p>内容：</p>
        <textarea rows="20" :value="(currentItem.contend as NoteItem).contend" />
        <button v-show="currentType === 'write'" @click="run(currentItem.contend as NoteItem)">运行(打开控制台查看)</button>
        <!-- <pre>{{ currentItem.contend.contend }}</pre> -->
      </div>
      <div class="note_coups">
        <div class="note_other">
          <p>描述：</p>
          <details class="details-2" open>
            <summary tabindex="-1">查看</summary>
            // eslint-disable-next-line no-mixed-spaces-and-tabs
            <content>{{ (currentItem.contend as NoteItem).desc }}</content>
          </details>
        </div>
        <div class="note_other" v-show="currentType === 'write'">
          <p>答案：</p>
          <details class="details-2">
            <summary tabindex="1">查看</summary>
            <content>{{ (currentItem.contend as NoteItem).result }}</content>
          </details>
        </div>
      </div>
    </template>
  </myLeftRightLaout>
</template>

<script setup lang="ts">
import useHttp from '@/utils/http/http.ts'
import { ref, reactive } from 'vue'
import myList from '@/components/myList/index.vue'
import myMenu from '@/components/myMenu/index.vue'
import myInput from "@/components/myInput/index.vue";
import myLeftRightLaout from '@/components/myLeftRightLaout/index.vue'
import { MeetConfigType, WriteConfigType } from '@/api/type'
import myButton from '@/components/myButton/index.vue'

const menuData = [
  {
    lable: 'meet',
    tag: 'meet'
  },
  {
    lable: 'write',
    tag: 'write'
  }
]

let writeConfig  = ref<WriteConfigType[]>([])
let meetConfig = ref<MeetConfigType[]>([])
type NoteItem = WriteConfigType | MeetConfigType
async function getNotesData() {
  writeConfig.value = await useHttp('writeConfig')as WriteConfigType[]
  console.log(writeConfig);
  meetConfig.value = await useHttp('meetConfig') as MeetConfigType[]
}
getNotesData()

interface ObjType {
  config:MeetConfigType[] | WriteConfigType[]
}

let obj = reactive<ObjType>({
  config: meetConfig.value
})

const currentType = ref('meet')
const toggleNotes = (val: 'meet' | 'write') => {
  currentType.value = val
  obj.config = (val === 'meet' ? meetConfig.value : writeConfig.value)
}
interface CurrentType{
  contend:NoteItem | []
}

const currentItem = reactive<CurrentType>({
  contend:[]
})
const showContend = (params: NoteItem) => {
  console.log(params);
  currentItem.contend = params
}
const run = (param:NoteItem) => {
  eval(param.contend)
}
let searctText = ref('123')
console.log(searctText);

const search = () => {
  console.log(searctText.value);

  if (!searctText.value) return
  obj.config = obj.config.filter(item => {
    console.log(item.label.indexOf(searctText.value) !== -1);
    if (item.label.indexOf(searctText.value) !== -1) {
      return item
    }
  })
}
</script>
<style lang="scss" scoped>
@media screen and (max-width:500px) {
  .note_contend {
    width: 100%;
    height: 100%;
    line-height: 10px;
  }

}

@media screen and (min-width: 500px) {
  .note_contend {
    width: 100%;
    height: 100%;
    line-height: 10px;
  }

}

.note_coups {
  width: 100%;
}

.note_other {
  width: 100%;
}

.note_wrapper {
  height: calc(100% - 18px);
  display: flex;
}

.searchBox {
  margin-bottom: 2px;
  display: flex;

  .searchInput {
    padding: 0;
    margin: 0;
    width: calc(100% - 70px);
  }

}
</style>
